<template>
  <div class="safeServe">
    <Curtain v-model="showContent" :zIndex="1001"/>
    <div class="content bg-white flex-col" v-if="showContent">
      <div class="title">安心服务</div>
      <div class="list flex-col">
        <div class="item flex-col" v-for="(item, index) in data" :key="`safe${index}`">
          <div class="name items-center">
            <img src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/safe.png" alt="" class="img">
            {{item.addServiceName}}
          </div>
          <div class="tips">
            {{item.addServiceContext}}
          </div>
        </div>
      </div>
      <div class="btns submit-btn" @tap="hide">
        好的
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    model: {
      prop: 'showContent',
      event: 'changeShow'
    },
    props: {
      showContent: Boolean,
      data: {
        type: Array,
        default: () => []
      }
    },
    watch: {
      showContent(value) {
        if (!value) {
          this.$emit('changeShow', value)
        }
      }
    },
    data() {
      return {
        showContent: true
      }
    },
    methods: {
      hide() {
        this.$emit('changeShow', !this.showContent)
      }
    }

  }
</script>
<style lang="scss">
.safeServe {
  .content {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    border-radius: 10px 10px 0 0;
    padding: 9px 15px;
    min-height: 211px;
    z-index: 1002;
    overflow: auto;
    .title {
      width: 100%;
      text-align: center;
      margin-top: 27px;
      font-size: 16px;
      font-weight: bold;
      color: #474747;
    }
    .list {
      margin-top: 14px;
      width: 100%;
      .item {
        .name {
          font-size: 16px;
          font-weight: 800;
          color: #242424;
          .img {
            width: 15px;
            height: 15px;
            margin-right: 8px;
          }
        }
        .tips {
          font-size: 16px;
          font-weight: 500;
          color: #A0A0A0;
          margin-top: 9px;
          margin-left: 22px;
        }
      }
    }
    .btns {
      position: absolute;
      bottom: 9px;
      left: 15px;
    }
  }
}
</style>
